<template>
    <div>  
        <el-button type="primary" style="display: block; margin-left: 0; text-align: left;" @click="handleAdd">新增</el-button>
          <el-table
        :data="tableData"
        style="width: 100%;"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="id"   label="ID"   sortable  width="70"> </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width= "80"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="age" label="年龄" sortable width="90"> </el-table-column>
        <el-table-column prop="email" label="邮件" width="200"> </el-table-column>
        <el-table-column prop="tel" label="手机号"  width="180"> </el-table-column>
    
        <el-table-column align="left">

          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">修改</el-button>
            <!-- 删除按钮 -->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete">删除</el-button>


            <el-dialog title="信息修改" :visible.sync="isFormVisible">
              <el-form ref="form" :model="editedItem" label-width="70px" id="myForm">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="editedItem.name"></el-input>
                </el-form-item>
                <el-form-item label="邮件" prop="email">
                  <el-input v-model="editedItem.email"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="editedItem.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="editedItem.age"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="tel">
                  <el-input v-model="editedItem.tel"></el-input>
                </el-form-item>
                  <el-button  type="primary"  round  @click="submitForm" style="width: 180px;" >提交</el-button>
              </el-form>
            </el-dialog>


            <el-dialog title="个人信息" :visible.sync="dialogVisible1">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="tel">
            <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm1">提交</el-button>
    </div>
</el-dialog>

    
            
          </template>
        </el-table-column>
    
         </el-table>
      </div>
    
    </template>
    
   
   <script>
import axios from 'axios';
export default {
  name: 'UserTable',
  data() {
    return {
      isFormVisible: false,
      dialogVisible: false,
      searchText: '',
      tableData: [],
      editedItem: {
        username: '',
        password: '',
        email: '',
        sex: '',
        age: '',
        tel: ''
      },
      dialogVisible1: false,
      form: {
        name: '',
        sex: '',
        age: '',
        tel: '',
        email: ''
      }
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8081/select')
        .then(response => {
          console.log(response.data);
          this.tableData = response.data;
          console.log(this.tableData);
        })
        .catch(error => {
          console.error(error);
        });
    },

    showDialog() {
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.editedItem = Object.assign({}, row);
      this.isFormVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: Object.values(row)[0]
        };
        console.log("id的值为" + data.id);
        axios.post('http://localhost:8081/delete', data)
          .then(response => {
            console.log(response);
            this.fetchData();
          })
          .catch(error => {
            console.error(error);
          });
      }).catch(() => {
        // 取消删除操作
      });
    },
    submitForm() {
      this.$confirm('确定要提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogVisible = false;
        axios.post('http://localhost:8081/update', this.editedItem)
          .then(response => {
            console.log(response.data);
            this.fetchData();
            this.$message({
              message: "修改成功",
              type: 'success',
              duration: 2000
            });
            this.isFormVisible = false;
          })
          .catch(error => {
            console.error(error);
          });
      }).catch(() => {
        // 取消提交操作234
        this.dialogVisible = false;
        this.isFormVisible = false;
      });
    },
    submitForm1() {
        axios.post('http://localhost:8081/insert', this.form)
          .then(response => {
            console.log(response.data);
            this.fetchData();
            this.$message({
              message: "增加成功",
              type: 'success',
              duration: 2000
            });
            this.dialogVisible1 = false;
          })
                 // 重置表单
        this.form = {
          name: '',
          sex: '',
          age: '',
          tel: '',
          email: ''
        }
          .catch(error => {
            console.error(error);
          });
    },
    handleAdd(){
        this.dialogVisible1 = true;
    }

  },
  created() {
    this.fetchData();
  }
};

   </script>
   
   <style scope>
   
   /* 表单样式 */
   .el-form {
       width: 300px; /* 设置表单宽度 */
       height: 400px; /* 设置表单高度 */
       margin: 0 auto; /* 将表单水平居中 */
   }
   
   /* 对话框样式 */
   .el-dialog {
       width: 400px; /* 设置对话框宽度 */
       height: 600px; /* 设置对话框高度 */
       text-align: center; /* 对话框标题居中 */
   }
   
   .search-container {
     display: flex;
     justify-content: space-between;
     flex-direction: row;
   }
   .dialog-footer {
  display: flex;
  justify-content: center;
}

   </style> 